<template>
    <div class="form-tooltip" ref="tooltip">
        <span><i class="fa fa-exclamation-triangle"></i></span>
        {{ message }}
    </div>
</template>

<script>
    export default {
        mounted(){
            var obj = document.querySelector(`.${this.rules.target}`).getBoundingClientRect()
            this.$refs.tooltip.style.left = obj.width + 10 + 'px'
            this.$refs.tooltip.style.top = obj.height / 2 + 'px'
        },
        data(){
            return {
                message : ''
            }
        },
        watch : {
            'rules.value' : function(newVal,oldVal){
                this.rules.checked = true
                if(newVal === ''){
                    this.message = this.rules.message.blank
                    this.rules.flag = true
                    return ;
                }
                if(this.rules.pattern && !this.rules.pattern.test(newVal)){
                    this.message = this.rules.message.illegal
                    this.rules.flag = true
                    return;
                }
                this.rules.flag = false
            }
        },
        props : ['rules']
    }
</script>

<style lang="less">
    .form-tooltip {
        min-width: 230px;
        box-sizing: border-box;
        border: 1px solid #ea6f5a;
        background-color: #fff;
        padding: 5px 10px 5px 36px;
        border-radius: 4px;
        position: absolute !important;
        transform: translate(0, -50%);
        font-size:14px;
        font-weight: 400;
        color: #666;
    }
    .form-tooltip span {
        font-size:16px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        position: absolute;
        top:50%;
        left: 10px;
        transform: translate(0, -50%);
        text-align: center;
        color: #ea6f5a;
    }
    .form-tooltip::before{
        content: '';
        position: absolute;
        left: 0;
        top:50%;
        width: 10px;
        height: 10px;
        border-left: 1px solid #ea6f5a;
        border-bottom: 1px solid #ea6f5a;
        background: #fff;
        transform: translate(-60%,-50%) rotate(45deg);
    }
</style>
